<template>
  <v-sheet>
    <!-- banner -->
    <showImg :defaultLeft="false" :showHeart="false" height="260" />
    <!-- 分类和搜索框 -->
    <v-card width="808" max-width="808" height="192" class="px-12">
      <!-- 分类 classificationArr-->
      <v-sheet class="d-flex align-center ml-12">
        <v-sheet
          v-for="(item, index) in model"
          :key="index"
          class="d-flex align-center flex-column"
        >
          <v-btn
            icon
            fab
            width="64"
            height="64"
            class="my-3 d-flex justify-center align-center"
          >
            <svg-icon size="36" :iconClass="item.svgName" />
          </v-btn>
          <span>{{ item.text }}</span>
        </v-sheet>
      </v-sheet>

      <!-- 搜索 -->
      <v-sheet
        height="56"
        color="#F5F5F5"
        class="br-max align-center d-none d-lg-flex d-xl-none"
      >
        <v-select
          :items="searchType"
          append-icon="arrow_drop_down"
          class="pl-3 pr-1 text-body-s searchType"
          item-text="name"
          item-value="uuid"
          v-model="searchTypeValue"
          hide-details
          single-line
          :menu-props="{
            offsetY: true,
            nudgeLeft: 0,
            transition: 'slide-y-transition',
            rounded: true,
            contentClass: 'elevation-4',
          }"
          solo
          flat
          dense
          background-color="transparent"
          color="rgba(0, 0, 0, 0.54)"
          height="32"
          style="width: 93px !important;max-width: 150px;"
        ></v-select>
        <v-sheet height="16" class="mb-2">
          <v-divider vertical></v-divider>
        </v-sheet>
        <v-text-field
          hide-details
          append-icon="search"
          placeholder="搜索"
          flat
          solo
          background-color="transparent"
          class="transparent px-1"
        ></v-text-field>
      </v-sheet>
    </v-card>
  </v-sheet>
</template>

<script>
export default {
  data() {
    return {
      searchType: [
        { name: '礼券', uuid: 'xxxxasd' },
        { name: '礼券2', uuid: 'xxxxasasdd' },
        { name: '礼券2aas3', uuid: 'xxxxasaszczxdd' },
      ],
      searchTypeValue: 'xxxxasd',
      model: [
        { text: '新增活动', svgName: 'dashboard-activity' },
        { text: '新增福利', svgName: 'dashboard-welfare' },
        { text: '即将到期礼券', svgName: 'dashboard-giftCertificate' },
        { text: '离职员工管理', svgName: 'dashboard-employee' },
      ],
    }
  },
}
</script>

<style scoped>
.searchType /deep/ .v-input__slot {
  padding-right: 4px !important;
}
.searchType /deep/ .v-input__icon > .v-icon {
  width: 8px;
  min-width: 4px;
  margin: 0 16px;
}
</style>
